Skip to main content

Visibility Settings

Visibility settings are key components of the Visual Editor. They refer to the process of setting the visibility of the corresponding content (widgets) within a platform. These settings are powerful tools to display or hide content based on various criteria. The purpose of this document is to describe the general features of the Visibility Settings in the Visual Editor.

In Ucraft Next, the Visual Editor (VE) users can manually control the visibility of the respective widgets within the platform in the Visual Editor section. To ensure more flexibility and a more user-friendly environment, Visibility Settings allow the VE users to choose who can view the corresponding content according to the customer’s location, session status, type of used device, browser, language preference, etc. The Visibility Settings deliver a customized and optimized experience to the VE users.

Visibility Settings Development​

The Visibility Settings package is stored in a Docker container with all its necessary dependencies, configuration, system tools, and runtime, which ensure the quick and reliable run of the visibility settings from the container into a live environment.

The container where the visibility settings are stored is equipped with hooking (a collection of techniques employed to change how applications or operating systems behave).

The useDataDidUpdate hook, located in the index.tsx file, allows observing params changes and rollUp based on the settings of the VisibilitySettings state.

The visibility settings have the following default state:

const visibilitySettingsDefaultstate = { 
..general:.true,
..browsers:.[],
..systems:.[],
..devices:.[],
..session:.[],
..languages:.[],
..agents:.[],
..location:.{,
....operator:.LocationsOperatorE.INCLUDE,
....variant:.LocationsVariantE.COUNTRY,
....data:. []
..}
};

All the visibility settings components use controllable components, they have a value and an observer onChange callback function.

The visibility settings are stateless, they have no dependency on the back-end content. The front-end content of the visibility settings is linked to the back-end content through the transform.backend.ts file located in the container. The transform.backend.ts file is equipped with the following functions: rollUp and rollDown.

The rollUp changes the front-end state of the visibility settings into the back-end interface, the rollDown function translates the back-end interface into visibilitySettings state.

All the types of typescripts are stored in the types.ts folder.

The possible options of the visibility settings (web browsers, operating systems, devices, sessions) are stored in option.values.ts.

Styling of Visibility Settings​

The styling of the visibility settings is done with StyledComponents mixed with BEM methodology selectors. Every component has its StyledComponent container. Child elements in HTML are with BEM methodology selectors (classes).

General Visibility​

In the Visual Editor, the Visibility Settings are equipped with a mechanism that allows enabling and disabling the general visibility of the respective widgets for the customers. This mechanism is displayed with a toggle, that is switched on and off by the VE user. The General Visibility toggle is set in the Settings section for each widget and is enabled by default. The disabling of the General Visibility toggle hides the corresponding widget, and the widget is no more visible to the user.

General Features of Visibility Settings​

The Visibility settings are displayed with a drop-down list, button, and text area based on the setting type.

The drop-down lists allow the VE user to select the respective option from the available list. The drop-down lists are equipped with the discard tool, which allows the VE user to remove the selected option.

The drop-down lists are equipped with the All option. This option is enabled by default and intends to select all options included in the respective list. The All option is automatically selected when all the options included in the list of the corresponding visibility setting type are selected one by one.

Types of Visibility Settings​

In the Visual Editor, the following visibility types are available for widgets:

  • Web Browsers
  • Devices
  • Languages
  • Operating System
  • Session Visibility
  • User Agent
  • Locations

Web Browsers​

The Web Browsers setting type marks web browsers that have access to the corresponding content on the website. The following web browsers are available:

  • Chrome
  • Firefox
  • Safari
  • Microsoft Internet Explorer
  • Microsoft Edge
  • Opera

The Web Browsers setting type is displayed with a drop-down list.

Devices​

The Devices setting marks the devices that have access to the corresponding content on the website and is displayed with a drop-down list. The VE user can choose on which device the corresponding widgets are visible to the customer. The following device options are available:

  • Desktop
  • Tablet
  • Mobile

Languages​

The Languages visibility setting marks the languages that have access to the corresponding content on the website. The language list is generated from the project’s dashboard languages. The Languages option is displayed with a drop-down list.

Operating System​

The Operating System setting marks the operating systems that have access to the corresponding content on the website. The following operating systems are available:

  • Windows
  • macOS
  • Linux
  • iOS
  • Android

The Operating System setting type is displayed with a drop-down list.

Session Visibility​

The Session Visibility setting type marks which content the customers can access according to their session:

  • Logged in Users
  • Guest Users

The Session Visibility setting type is displayed with a drop-down list.

User Agent​

The User Agent setting type marks user agents that do not have access to the corresponding content on the website. This setting type is displayed with a text area, where the VE user is allowed to enter multiple user agent options.

Locations​

The Locations setting marks the countries that have access to the corresponding content on the website. The VE user chooses from which location the respective widgets are visible to the customers. The visibility of the locations is displayed with the Include and Exclude buttons. These buttons are designed to allow the VE user to indicate whether the selected countries are excluded or included in the visibility settings.

The countries are listed alphabetically and a checkbox is displayed next to each country to indicate whether the corresponding country is included or excluded from the visibility settings.

The Locations setting type is equipped with a Custom IP data entry field. This is an input field that allows the VE user to hide the respective widget according to the customer’s IP address.